<!-- eslint-disable vue/no-unused-components -->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!--  -->
        <el-form ref="pageParams" :model="pageParams">
          <el-row>
            <el-col :span="5">
              <el-form-item label="标签名称" prop="tagName">
                <el-input
                  @keyup.enter="searchClick"
                  style="width: 150px"
                  placeholder="请输入"
                  v-model="pageParams.tagName"
                  size="mini"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态" prop="state">
                <el-select
                  style="width: 150px"
                  v-model="pageParams.state"
                  size="mini"
                >
                  <el-option :value="1" label="已启用" />
                  <el-option :value="0" label="已禁用" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button size="small" @click="eliminateClick">清除</el-button>
                <el-button :loading="isLoading" size="small" type="primary" @click="addCatalogueList">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="rigth-btn">
              <el-form-item>
                <el-button
                  icon="el-icon-edit"
                  size="small"
                  type="success"
                  @click="addDirectoryClick('add', 0)"
                >
                  新增标签
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="rigth-btn">
              <el-form-item>
                <el-button v-if="$route.query.id" icon="el-icon-back" type="text" @click="$router.push('./list')">返回学科</el-button>
                <span v-else></span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-alert
          v-if="cResultTip"
          :title="cResultTip"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>

        <!--  -->
        <el-table
          :data="catalogueList"
          v-loading="isLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          class="table-hear"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            width="80px"
            label="序号"
            type="index"
          >
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default={row}>
            {{$moment(row.addDate).format("YYYY-MM-DD HH:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              {{
                row.state ? "已启用" : "已禁用"
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!--  -->
            <template #default="{ row }">
              <el-button type="text" @click="addJurisdictionList(row)">
                <template v-if="row.state === 1">禁用</template>
                <template v-else>启用</template>
              </el-button>
              <el-button type="text" :disabled="row.state === 1" @click="addDirectoryClick('edit', row.id)">修改</el-button>
              <el-button :disabled="row.state === 1" @click="deleteClick(row.id)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            background
            :current-page="Number(pageParams.page)"
            :page-size="Number(pageParams.pagesize)"
            :total="Number(pageParams.total)"
            layout="sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>

    <!-- 弹层 -->
    <tags-add
      ref="tagsAdd"
      :show-dialog.sync="showDialog"
      :current-page-id="currentPageId"
      @gest="addCatalogueList"
      @updateAddCatalogueListt="addCatalogueList"
      :id="pageParams.subjectID"
    />
  </div>
</template>

<script>
import { list as getCatalogueList, remove as getDeleteList, changeState } from '@/api/hmmm/tags'
import tagsAdd from '../components/tags-add'

export default {
  name: 'tags',
  components: {
    tagsAdd
  },
  data () {
    return {
      catalogueList: [],
      total: 0,
      showButton: false,
      isLoading: false,

      pageParams: {
        subjectID: null,
        subjectName: '',
        page: 1, // 当前页码
        pagesize: 10, // 每页条数
        total: 0 // 总条数
      },
      // 控制弹层显示和隐藏
      showDialog: false,
      // 记录父级id
      currentPageId: null
    }
  },
  // 创建完毕,做一次查询
  created () {
    if (this.$route.query.id) {
      this.pageParams.subjectID = this.$route.query.id
      // console.log(this.pageParams.id)
      this.addCatalogueList()
    } else {
      this.addCatalogueList()
    }
  },
  computed: {
    cResultTip () {
      return `数据—共 ${this.pageParams.total} 条`
    }
  },
  methods: {
    async addJurisdictionList (row) {
      console.log(row)
      const state = row.state ? 0 : 1
      await changeState({ state, id: row.id })
      this.addCatalogueList()
    },
    // 删除
    deleteClick (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await getDeleteList({ id: id })
        this.$message.success('删除成功')
        if (this.catalogueList.length === 1 && this.pageParams.page > 1) {
          this.queryParams.page--
        }
        this.addCatalogueList()
      })
    },

    // 获取列表数据
    async addCatalogueList () {
      const { data } = await getCatalogueList(this.pageParams)
      this.catalogueList = data.items
      console.log(data)
      this.pageParams.total = data.counts
      this.pageParams.page = data.page
      this.pageParams.pagesize = data.pagesize
      // this.isLoading = false
    },

    eliminateClick () {
      this.pageParams.tagName = ''
      this.pageParams.state = null
      this.addCatalogueList()
    },
    // 点击某一个页码
    handleCurrentChange (curPage) {
      this.pageParams.page = curPage
      this.addCatalogueList()
    },

    addDirectoryClick (type, id) {
      if (type === 'add') {
        this.showDialog = true
        this.currentPageId = id
      } else if (type === 'edit') {
        this.showDialog = true
        this.currentPageId = id
        //
        this.$nextTick(() => {
          // this.$emit('update:showDialog', false)
          this.$refs.tagsAdd.getSelectionDetail()
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.alert {
  margin: 10px 0px;
}
.rigth-btn {
  float: right;
}
.block {
  margin: 20px;
  float: right;
}
// .table-hear{
//   background-color: #f4f4f5;
// }
</style>
